<template>
  <div class="Notice flex justify-between items-start">
    <div class="right">
      <div class="photo">
        <img src="" alt="">
        <div class="name">
          <span>县委书记</span>
          <span class="c265697">
            吴明禹
          </span>
        </div>
        <div class="photo-content">
          <div>社会各界人士和广大市民：</div>
          <div style="text-indent: 2em">
            书记/县长信箱是党和政府密切联系群众的桥梁。真诚地欢迎社会各界人士和市民对我县改革开
            放、经济建设和社会发展等方面工作提出您的意见、批评、建议、设想和请求。对您反映的情况，提出的意见、建议或投诉、请求，我们将按照《信访条例》的有关
            规定做出妥善处理，并及时给予答复。把我县建设得更加美好，是我们共同的愿望，同时也离不开您的支持！
          </div>
        </div>
      </div>

      <LetterInquiry class="form-cx"></LetterInquiry>
    </div>
    <div class="left">
      <div class="title">写信须知</div>
      <div class="content">
        <div class="content-title">写信须知</div>
        <div class="content-text">
          1、该信箱系统是党和政府密切联系群众的桥梁。社会公众可通过信箱对我县改革开放、经济建设和社会发展等各方面工作提出意见、批评、建议、设想和诉求。<br />
          2、根据相关规定，涉法涉诉事项请依照规定程序向司法机关提出，投递给其他信箱的涉法涉诉信件将不予受理。<br />
          3、写信前请认真阅读领导分工和写信须知，相同内容信件请勿重复提交。一信多投和重复提交的信件，只保留一件，其余信件将不予受理。广告类、无实质内容及其他不符合写信须知要求的信件不予受理。<br />
          4、为便于解决问题和沟通，建议写信人留下真实姓名和联系方式。出于隐私保护，信件办理情况不会每件公开。<br />
          5、信件提交成功后，系统将自动生成“信件编号”和“姓名”，请牢记“信件编号”和“姓名”，写信人可以用 “信件编号”和“姓名”通过“信件查询”栏目搜索到信件办理情况。<br />
          6、禁止一切对书记/县长信箱的攻击行为，禁止利用书记/县长信箱进行造谣、诽谤、传播反动言论等种种非法行为，违者将依法追究其责任。<br />
          7、因系统兼容性请使用IE浏览器。写信过程中如有任何技术问题，请咨询书记/县长信箱系统维护电话：0816-5338105。<br />
        </div>
      </div>
      <div class="button text-center">
        <el-button @click="toWrite">
          开始写信
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import LetterInquiry from "@STmailboxesWeb/components/LetterInquiry";
export default {
  components: {
    LetterInquiry,
  },
  name: "Notice",
  data() {
    return {

    };
  },

  methods: {
    toWrite() {
      this.$router.push({
        path: '/writing',
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.Notice {
  width: 100%;

  .right {

    width: 29%;

    .photo {
      text-align: center;
      height: 447px;
      background: #F7FBFF;
      border: 1px solid #D5D5D5;
      padding: 20px;


      >img {
        width: 96px;
        height: 120px;
        background: #D8D8D8;
        display: inline-block;
      }

      .photo-content {
        text-align: start;
        line-height: 20px;
      }
    }

    .form-cx {
      margin-top: 10px;

      background: #e2efff;
      border: 1px solid #d6ddeb;

    }

    .name {
      margin: 10px 0px;
      padding-bottom: 10px;
      border-bottom: 1px solid #d1cfcf;
    }
  }

  .left {
    width: 69%;
    min-height: 500px;
    background: #FFFFFF;
    border: 1px solid #D5D5D5;
    padding-bottom: 20px;

    .title {
      width: 100%;
      height: 40px;
      // line-height: 40px;
      background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
      border: 1px solid #DBDBDB;
      padding: 10px 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }

    .content {
      padding: 20px;

      .content-title {

        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        border-bottom: 1px solid #d1cfcf;
        padding: 8px 0px;
      }

      .content-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 25px;
        padding: 20px 0px;
        border-bottom: 1px solid #d1cfcf;
      }
    }
  }

  .c265697 {
    color: #265697;
  }


}

::v-deep {


  .button .el-button {
    width: 100px;
    height: 34px;
    background: linear-gradient(179deg, #3A8EDC 0%, #2A6AA5 100%);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 34px;
    padding: 0px;
  }
}
</style>